<template>
	<div class="device_event">
	<!--中间部分的内容-->
	<div class="midd">
		<el-form :model="ruleForm"  label-width="100px" class="demo-ruleForm">
		  <h4>
		   <span style="font-size:16px;">接口名称:</span> <span style="font-size:16px;">{{this.titleName}}</span>
		  </h4>
		</el-form>  
		<div class="biao">
				<el-table
					:data="tableData"
					style="width:100%; margin:0 auto;"
					border
					v-loading="listLoading"
					:header-cell-class-name="tableheaderClassName"
					:row-class-name="tableRowClassName">
					<el-table-column 
					prop="appName"
					label="应用名称">
					</el-table-column>
					<el-table-column
					prop="totalAccessSize"
					label="调用次数">
					</el-table-column>
					<el-table-column
					prop="successPercent"
					label="成功率(%)">
					</el-table-column>
					<el-table-column
					prop="avgProcessTime"
					sortable
					label="平均时长(ms)">
					</el-table-column>
				</el-table>
		<!--分页-->
		<div class="di claerfix">
			<div class="di_foot" style="margin:15px auto;">
				<el-pagination style='text-align:center;'
					background
					layout="prev, pager, next" 
					@current-change="handleCurrentChange1" 
					:total="totalDetails"
				>
				</el-pagination>
			</div>
		  </div>
		  <hr />
		  <h4>日志查看</h4>
				<el-table
					:data="tableData2"
					style="width:100%; margin:0 auto;"
					border
					v-loading="listLoading"
					:header-cell-class-name="tableheaderClassName"
					:row-class-name="tableRowClassName">
					<el-table-column 
					prop="requestTime"
					label="访问时间">
					</el-table-column>
					<el-table-column
					prop="appName"
					label="应用名称">
					</el-table-column>
					<el-table-column
					prop="status"
					label="访问状态"
					:formatter="formatter">
					</el-table-column>
					<el-table-column
					prop="processTime"
					sortable
					label="耗时(ms)">
					</el-table-column>
				</el-table>
			<!--分页-->
			<div class="di claerfix">
				<div class="di_foot" style="margin:15px auto;">
					<el-pagination style='text-align:center;'
						background
						layout="prev, pager, next" 
						@current-change="handleCurrentChange2" 
						:total="totalJournal"
					>
					</el-pagination>
				</div>
			  </div>
			</div>
		</div>
	</div>
	<!--日志查看-->
				
	<!--日志查看-->
	
</div>
</template>
<script>
import { interfaceDetail, interfacerizhi, checkLogin } from '../../api/api.js';
export default{
	name:"interfaceDetail",
	data(){
		return{
			time:'',
			routerInterfaceId:'',
			titleName:'',
			page: 1,
			paged: 1,
			totalDetails: 0,
			totalJournal:0,
			listLoading:false,
			formLabelWidth: '120px',
			dialogFormVisible:false,
			tableData: [],
			tableData2: [],
			InterfaceDetails:null,
			pageSize:10,
		}
	},
	watch: {
    
  	},
	methods:{
		// 分页获取
		handleCurrentChange1(val) {
			this.page = val;
			this.getUsers();
		},
		handleCurrentChange2(val) {
			this.paged = val;
			this.getUsers2();
		},
		//获取用户列表
		getUsers() {
			let para = {
				endDate:this.InterfaceDetails.endDate,
				interfaceId:this.InterfaceDetails.interfaceId,
				pageNumber:this.page,
				pageSize:this.pageSize,
				startDate:this.InterfaceDetails.startDate,
			};
			this.listLoading = true;
			interfaceDetail(para).then((res) => {
				console.log('接口详情。。。',res.list);
				this.totalDetails=res.count;
				this.tableData = res.list;
				this.listLoading = false;
			});
		},
//		接口日志数据
		getUsers2() {
			let para = {
				endDate:this.InterfaceDetails.endDate,
				interfaceId:this.InterfaceDetails.interfaceId,
				pageNumber:this.paged,
				pageSize:this.pageSize,
				startDate:this.InterfaceDetails.startDate,
			};
			this.listLoading = true;
			interfacerizhi(para).then((res) => {
				console.log('接口日志...',res.list);
				this.totalJournal=res.count;
				this.tableData2 = res.list;
				this.listLoading = false;
			});
		},
		//表格加的属性
		tableRowClassName({rowIndex}) {			
			if (rowIndex % 2==0) {	        
				return 'success-row';
			} else if (rowIndex % 2 !==0) {
				return 'warning-row';
			}
			return '';
		},
		formatter(row,column){
			return row.status == 1 ? '访问失败' : '访问成功'
		},
		tableheaderClassName() {
			return "table-head-th";
		},
		dianji(row){
			console.log(row);
			this.dialogFormVisible=true;
			this.form.date=row.date;
			this.form.info=row.info;
			this.form.name=row.name;
			this.form.type1=row.type1;
			this.form.type2=row.type2;
			this.form.id=row.id;
		},
	},
	mounted() {
		if(checkLogin(this)){
			var self = this;
			// 获取用户
			let InterfaceDetails = sessionStorage.getItem('InterfaceDetails');
			if(InterfaceDetails) {
				InterfaceDetails = JSON.parse(InterfaceDetails);
				self.InterfaceDetails=InterfaceDetails;
				self.titleName = self.InterfaceDetails.interfaceName
				console.log('传来的数据。。。。。。。。',self.InterfaceDetails.interfaceName);
			}
			this.getUsers();
			this.getUsers2();		
		}
	}
}
</script>


<style scoped>
.device_event{width:100%;}
.device_event .head{
		width: 90%;
		margin: 0 auto;
		margin-top: 40px;
		margin-bottom: 40px;
	}	  
.device_event .midd{ width:90%;margin: 0 auto;margin-bottom: 50px; }
</style>